<div class="docc" style=" margin-top:30px;">
<div id="ast_docu">
<ol>
<li class="docu_front">Setting up the front page</li>
<li class="docu_img">Setting up posts Image Thumbnails</li>
<li class="docu_vid">Setting up posts Video Thumbnails (<strong>PRO</strong>)</li>
<li class="docu_blog">Setting up a Blog Page</li>
<li class="docu_contct">Setting up a contact page (<strong>PRO</strong>)</li>
<li class="docu_bg">Setting up Individual Background Image (<strong>PRO</strong>)</li>
<li class="docu_headr">Setting up page individual page header (<strong>PRO</strong>)</li>
<li class="docu_menu">Setting up the Menu</li>
<li class="docu_gallery">Setting up the Beautiful Gallery</li>
<li class="docu_styling">Styling the Theme</li>
<li class="docu_wdgts">Widgets (<strong>PRO</strong>)</li>
<li class="docu_shorts">Shortcodes (<strong>PRO</strong>)</li>
<li class="docu_supp">Theme Support</li>
</ol>
</div>
<!--Setting up frontpage-->
<div id="docu_front">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h2>1. Setting up the front  page</h2><br>
When you  select &ldquo;Your Latest Posts&rdquo; from Settings&gt; Reading you will be able to  display 8 frontpage elements on your site&rsquo;s frontpage. They are: <br>
<br>
i. Slider<br>
ii. Blocks<br>
iii. Welcome  Text<br>
iv. Frontpage  Posts<br>
v. Location  Map<br>
vi. Call to  Action<br>
vii. Frontpage  Widgets Area</p>
<br />
<br />
<p><h3>i. Setting up the slider</h3>
  From <strong>Asteria Theme Options&gt; Slider</strong> click  the &ldquo;+ Add New&rdquo; button to add new slides. For each slide you should set: 
<p><img src="http://i.imgur.com/PR136rb.png" alt="Create New Slide" width="637" height="493"></p>
  <br>
  a.<strong>Image:</strong> Select/Upload Slide image by  clicking the &ldquo;Upload Image&rdquo; button. If you are using the &ldquo;Full Width&rdquo; mode,  make sure the slider images have at least 1600px of width. If set to fixed, the  slider images should have minimum width of 1200px. If your images are bigger,  you can resize and crop them online using this application: <a target="_blank" href="http://pixlr.com/editor/">http://pixlr.com/editor/</a>. There&rsquo;s also a video tutorial on  youtube on how to resize and crop your images and save them: <a target="_blank" href="https://www.youtube.com/watch?v=WmFjvNlm1E4">https://www.youtube.com/watch?v=WmFjvNlm1E4</a><br>
  b. <strong>Title:</strong> Write a title of your  slide. This is optional; if you don&rsquo;t want to display the title of the slide  you should keep this empty.<br>
  <br>
  c. <strong>Description:</strong> If you want to display a  little subtext under the title of the slide you should use this field. You can  use HTML tags.<br>
  <br>
  d. <strong>Url:</strong> If you want your slide  image and title to contain a link, you should put it here.<br>
  e. <strong>Slide Text layout:</strong>  Select how you want to display the text of the  slider. </p>
<p>By default  the slider displays 3 default slides, if you want to remove the slider from  your frontpage, set the slider type to &ldquo;Disable Slider&rdquo;. If you want to display  sliders in your static pages, use the slider shortcode that comes with theme.  See <strong>Shortcodes</strong> Section for details.</p><br>

<p><h3>ii. Setting up the blocks</h3>
  To setup the  blocks, Go to Asteria Options&gt; Frontpage and click the arrow button beside  the text &ldquo;<strong>Blocks</strong>&rdquo; and blocks  settings options will appear. You can setup or hide each block individually. You  can display up to 4 blocks. Each block has followings options:<br>
  
  <strong>b. Block Title: </strong>Title of the block.<br>
  <strong>c.</strong> <strong>Block Icon:</strong> You can select which icon to display from this option.  To hide the icon, select &ldquo;No icon&rdquo; from the list.<br>
  <strong>d. Block Content: </strong>Write your block  content here. You can also add html and images in your block content.</p>
  <br />
<strong>Note:</strong> You can hide each block by clearing the "Title" field and "Description" field. When these 2 fields are empty, the block is will not be shown on frontpage. 
<br />

<p><h3>iii. Setting up Welcome Text</h3>
  To setup  welcome text, Go to Asteria Options&gt; Frontpage and click the arrow button  beside the text &ldquo;<strong>Welcome Text</strong>&rdquo; and welcome  text settings options will appear. You can write you welcome text and also what  color the background of the welcome text area should be.</p>
<br />
<!--<p><h3>iv. Setting up Tabs</h3>
  To setup  frontpage tabs, Go to Asteria Options&gt; Frontpage and click the arrow button  beside the text &ldquo;<strong>Tabs</strong>&rdquo; and tabs  settings options will appear. Click the &ldquo;+Add New&rdquo; button to add new slides.  You can setup the tab title and tab content for each tab element. You can add  multiple tabs by clicking the &ldquo;+Add New&rdquo; button.<br>
  <strong>Note:</strong> Upon Clicking the Add New Button the  visual editor may not appear properly. Click the &quot;Save Changes&quot;  button from top and the editor will appear just fine.</p>
<br />-->
<p><h3>v. Frontpage Posts</h3>
  To display  posts on front page, click the arrow button beside the &ldquo;Frontpage Posts&rdquo; text.  Now setup your posts: <br>
  <br>
  <strong>a. Title &amp; Description:</strong> You can  display some text before your posts (Optional).<br>
  <strong>b. Layout:</strong> Select how you want your posts to  appear.<br>
  <strong>c. Display posts from a category:</strong> By default, the posts appear form  all categories and the number of posts per page is set from Settings&gt;  Reading. But if you want to display posts from a selected category and a  selected number of posts, you should turn this option on.<br>
  <strong>d. Category Name:</strong> If you turn on the above option you  will have to select the category of your frontpage posts.<br>
  <strong>e. Number of Posts:</strong> You can only set the number of  frontpage posts if you turn on the option &ldquo;Display posts from a selected  category&rdquo; from above. If you haven&rsquo;t, you can set the number of posts from  Settings&gt; Reading.</p>
<br />
<p><h3>vi. Location Map</h3>
  If you want  to display your company location in a map, you can do that from this section.  To setup the map, you should set the following  settings:<br>
  <br>
  <strong>a. Title &amp; Description:</strong> You can  display some text before your posts (Optional).<br>
  <strong>b.</strong> <strong>Latitude and Longitude:</strong> to display your location in the map, you will have  to find your location&rsquo;s latitude and longitude. To know your location&rsquo;s  lat/long, use this website: <a target="_blank" href="http://www.doogal.co.uk/LatLong.php">http://www.doogal.co.uk/LatLong.php</a> after determining your lat/long, you  should put the lat/long in this field separating them with a comma. Eg:  53.359286 , -2.040904<br>
  <strong>c. Map Bubble Text: </strong> You can display a text, your location details,  etc when someone hovers over your map&rsquo;s pointer. You can use HTML in this  field.</p>
<br />
<p><h3>vii. Call to Action</h3>
  If you want  to get your visitor&rsquo;s attention and urge your site&rsquo;s viewers of a sales  promotion message to take an immediate action you should use this Element. To  setup a call to action banner, you should fill these settings: <br>
  <br>
  <strong>a. Call to Action Text:</strong> You can  write the message you want your viewers to follow in this section.<br>
  <strong>b. Button Text:</strong>  Text to display in the button.<br>
  <strong>c. Button Link:</strong> when viewers click the button, they  should be taken to this link.<br>
  <strong>d. Background Color:</strong> The color of the background can be  set here.<br>
  <strong>e. Button Color:</strong> The color of the button&rsquo;s background  can be set here.<br>
  <strong>f. Button Text Color:</strong> You can set the button&rsquo;s text color  from this option.</p>
<br />
<p><h3>viii. Frontpage Widgets Area</h3><strong>
  </strong><br>
  You can select your widgets from Appearance&gt; Widgets. These widgets will be  displayed only on frontpage. You can display any widgets you want here. </p>
<br />
<p><h3>Frontpage Elements Position</h3>
  You can  change the order of the frontpage elements from this section. Simply drag and  drop each element and re-order their position.</p>
</div>


<!--2. Setting up Image Thumbnails-->
<div id="docu_img">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>2. Setting up posts Image Thumbnails</h3>
<p>To setup post thumbnails, you should use the "Featured image" option of wordpress. While editing the post, on the right, notice there is a "Featured Image" box. Add your post thumbnail image from here. For best visual appearance, the minimium dimension of the thumbnails should be <b>350px x 235px</b></p>

<p><img src="http://i.imgur.com/6yEgOWT.png" alt="Create New Slide" width="608" height="170"></p>
</div>

<!--3. Setting up Video Thumbnails-->
<div id="docu_vid">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>3. Setting up posts Video Thumbnails (<strong>PRO</strong>)</h3>
<p>To setup video thumbnails, while editing the posts notice there is a box on right that says "Asteria Video Thumbnail". Add your youtube video link here to display it as a thumbnail of the post. You can display your youtube videos as thumbnails. Your viewers can play the video directly from the front page without going to the main post.</p>

<p><img src="http://i.imgur.com/c1lFiKA.png" alt="Video Thumbnails" width="608" height="302"></p>
</div>

<!--4. Setting up a Blog Page-->
<div id="docu_blog">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>3. Setting up a Blog Page</h3>
<p>If you want to set up a blog page, you should use the "Blog page Template" that comes with the theme. To setup a blog page, follow these steps:</p>
<ul>
<li><b>Step 1:</b> First mark all the posts with a category called "blog" or something.</li>
<li><b>Step 2:</b>	Then create a new page and Give it a title.  While in the post editor page, notice there is a box on right called "Page Attributes". From this box, you can select multiple page templates. Select "Blog Page Template" from the dropdown list and save the page. </li>
<li><b>Step 3:</b>	Then Go to Appearance> Asteria options> Misc. and select the category "blog" for "Display Blog Posts from a selected Category" option. </li>
<li><b>Step 4:</b>	Now view the created page, and you will see the page is displaying all the posts from your specified category.</li>
</ul>

<p><img src="http://i.imgur.com/CoTg2Ac.png" alt="Page Template" width="608" height="308"></p>
</div>


<!--5. Setting up a contact page-->
<div id="docu_contct">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>5. Setting up a contact page (<strong>PRO</strong>)</h3>
<p>In Asteria, you can setup a contact page without any plugin. Just create a new page and select the "Contact Page" template from "Page Attributes" box and you are good to go. By default the contact page email address is set to your admin email address. You can change that from Appearance> Asteria Options> Miscellaneous.</p>

</div>


<!--6. Setting up Individual Background Image-->
<div id="docu_bg">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>6. Setting up Individual Background Image (<strong>PRO</strong>)</h3>
<p>In Asteria you can use different background color or images on different pages/posts. While editing the post/page notice on right there is a settings box called "Asteria Background per page". You can set the background color/image from this options box.</p>

<p><img src="http://i.imgur.com/RfCT23J.png" alt="Background Image" width="608" height="447"></p>
</div>


<!--7. Setting up page individual page header-->
<div id="docu_headr">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>7. Setting up page individual page header (<strong>PRO</strong>)</h3>
<p>With Asteria you can use different page header for different pages. Each pages of your site can have different image. You can setup different page headers while editing the page. In page editor, notice there is a box on right that says "Asteria Page header" Under this you can either select a different image as your page header. Make sure the width of the image is at-least 1200px. If you are using the "Full Width" mode from the theme options page, then the image should be at-least 1600px wide.</p>

<p><img src="http://i.imgur.com/chH2rSq.png" alt="Page header" width="302" height="447"></p>
</div>



<!--8. Setting up the Menu-->
<div id="docu_menu">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>8. Setting up the Menu</h3>
<p>Setting up a menu is quite easy. Follow these steps to create a menu:</p>
<ul>
<li><b>Step 1:</b> Go to Appearance>Menus and click the "create a new menu" link. Give your menu a name and click the "Create Menu" button.</li>
<li><b>Step 2:</b> Now add menu items to the newly create menu. You can add menu from your pages and categories. You can also add custom links to your menu. To add a menu item, select the menu item from left and click the "Add to menu" button. </li>
<li><b>Step 3:</b> You can change the order of menus from right by dragging and dropping them. To create a submenu, drag a menu item and move it to right.</li>
<li><b>Step 4:</b> After adding all the menu items, select the "Header Navigation" option from the bottom. </li>
</ul>

<p><img src="http://i.imgur.com/BjBddrG.png" alt="Menu Setup" width="608" height="242"></p>
</div>

<!--9. Setting up the Gallery-->
<div id="docu_gallery">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>9. Setting up the Beautiful Gallery</h3>
<p>With Asteria you can setup beautiful galleries without any plugins. <a target="_blank" href="http://bit.ly/1fdz09M">Example</a></p>
<p><strong>To set up a gallery, follow these steps:</strong></p>
<ul>
<li>Create  a New post, page and click the <strong>Add Media</strong> button. A new window will popup.</li>
<li>Click the <strong>Create Gallery</strong> button from left. Now  upload your photos or choose from existing photos by clicking the &ldquo;Media  Library&rdquo; link. </li>
<li>After  selecting the images click the <strong>Create  new Album </strong>button. </li>
<li>Now  on the right make sure you select: Link to: <strong>Media File</strong></li>
<li>Then click  the <strong>Insert Gallery</strong> button from  bottom. That’s it! <br />
</li>
</ul>
<p><strong>Note: </strong>To disable this feature, Go  to Appearance&gt; Asteria Options&gt; Miscellaneous  Settings and turn off the <strong>Beautify My Galleries </strong>option.<strong></strong></p>
</div>


<!--10. Styling the Theme-->
<div id="docu_styling">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>10. Styling the Theme</h3>
<p>With Asteria you can change the color of every elements and text.</p>
<ul>
<li><b>a.	Setting up a logo:</b> By default the theme displays a text logo. You can change the font, size and color of the logo from Appearance> Asteria Options> Typography. If you want to display an image logo, you can also do that from Asteria Options> Basic.</li>
<li><b>b.	Changing the background color/image:</b> You change the background color or add an image as background from Appearance> backgrounds. </li>
<li><b>c. Changing the Elements Color:</b> To change the color of each element, Go to Appearance> Customize. You can change the colors from "Asteria Element Colors" and "Asteria Text Colors".</li>
</ul>

</div>



<!--11. Widgets-->
<div id="docu_wdgts">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>11. Widgets (<strong>PRO</strong>)</h3>
<p>Asteria comes with 15 Custom Widgets. You can add them to your widget areas from Appearance> Widgets. The widgets are</p>

<ol>
  <li><strong>Biography Widget</strong> - A widget to display site owner's  biodata, occupation and image. </li>
  <li><strong>Countdown Widget</strong> - A widget to display countdown to  your event or anything.</li>
  <li><strong>Custom 125 x 125 ad Widget</strong> - To display custom 125 x 125px ads. </li>
  <li><strong>Custom 160 x 600 ad Widget</strong> - To display custom 160 x 600px ads.</li>
  <li><strong>Custom 250 x 250 ad Widget</strong> - To display custom 250 x 250px ads.</li>
  <li><strong>Facbook Likebox Widget</strong> – A widget to display the profiles  of those who liked your facebook page.</li>
  <li><strong>Featured Posts Widget</strong> – A widget to display posts from a  selected category.</li>
  <li><strong>Flickr Photostream Widget</strong> – A widget to display flickr images  from any flickr album.</li>
  <li><strong>Google Plus Followers Widget</strong> – A widget to display your google  plus followers.</li>
  <li><strong>Image Widget</strong> – An image widget to display image.</li>
  <li><strong>Pinterest Pinboard Widget</strong> – A widget to display pinterest  images from your pinterest profile.</li>
  <li><strong>Popular Posts Widget</strong> – Displays popular posts of your  site. The popularity of the posts is based on comment counts.</li>
  <li><strong>Random Posts Widget</strong> – Displays random posts.</li>
  <li><strong>Recent Posts Widget</strong> – Displays recent posts with style.  Forget about the generic recent widget that comes with wordpress.</li>
  <li><strong>Twitter Follower Widget </strong>– A widget to display followers from  your twitter account.</li>
</ol>

  
</div>



<!--12. Shortcodes-->
<div id="docu_shorts">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>12. Shortcodes (<strong>PRO</strong>)</h3>
<p>Asteria comes with 29 amazing easy to use shortcodes with inline documentation helper. You can use these shortcodes in your posts, pages and also in your text widget.</p>
<ol>
  <li>Success box Shortcode</li>
  <li>Info box Shortcode</li>
  <li>Warning box Shortcode</li>
  <li>Error box Shortcode</li>
  <li>Quote Shortcode</li>
  <li>Divider Shortcode</li>
  <li>Table Shortcode</li>
  <li>2 columns text Shortcode</li>
  <li>3 columns text Shortcode</li>
  <li>4 columns text Shortcode</li>
  <li>Facebook Like button Shortcode</li>
  <li>Tweet button Shortcode</li>
  <li>Pinterest button Shortcode</li>
  <li>Google + button Shortcode</li>
  <li>Slider Shortcode</li>
  <li>List type 1 shortcode</li>
  <li>List type 2 Shortcode</li>
  <li>List type 3 Shortcode</li>
  <li>List type 4 Shortcode</li>
  <li>List type 5 Shortcode</li>
  <li>Responsive Youtube video Shortcode</li>
  <li>Responsive Vimeo video Shortcode</li>
  <li>Tabs Shortcode</li>
  <li>Toggle Shortcode</li>
  <li>Button Shortcode</li>
  <li>Call to Action Shortcode</li>
  <li>Iframe Shortcode</li>
  <li>Countdown Timer Shortcode</li>
  <li>Featured Image Shortcode</li>
</ol>
<p><img src="http://i.imgur.com/D0HXEoK.png" alt="Shotcodes" width="350" height="224"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<ol>
  <li><strong>Success Box Shortcode<br />
    </strong>Display Your content  in a greenish message box. Great for displaying success messages. <a target="_blank" href="http://i.imgur.com/tLFZg0p.png"><strong>Example</strong></a><strong><br />
      Usage:  </strong>Wrap your text with [success][/success]<br />
  </li>
  <li><strong>Info Box Shortcode<br />
    </strong>Display Your content  in a bluish message box. Great for displaying info messages. <a target="_blank" href="http://i.imgur.com/5dScnr5.png"><strong>Example</strong></a><strong><br />
      Usage:  </strong>Wrap your text with [info][/info]<br />
    <strong> </strong></li>
  <li><strong>Warning Box Shortcode<br />
    </strong>Display your content  in an orange message box. Great for displaying warning message. <a target="_blank" href="http://i.imgur.com/n2AC3us.png"><strong>Example</strong></a><strong><br />
      Usage:  </strong>Wrap your text  with [warning][/warning]<br />
    <strong></strong></li>
  <li><strong>Alert Box Shortcode<br />
    </strong>Display your content  in a red message box. Great for displaying alert message. <a target="_blank" href="http://i.imgur.com/7S2DOQM.png"><strong>Example</strong></a><strong><br />
      Usage:  </strong>Wrap your text  with [alert][/alert]<br />
    <strong> </strong></li>
  <li><strong>Quote Shortcode<br />
    </strong>Display your quote  with a beautiful quote icon. <a target="_blank" href="http://i.imgur.com/hVX7J6U.png"><strong>Example</strong></a><br />
    <strong>Usage: </strong>Wrap your text  with [qoute][/quote]<br />
    <strong> </strong></li>
  <li><strong>Divider Shortcode<br />
    </strong>Use this shortcode  to display a borderline or divider to divide your post.<strong> </strong><a target="_blank" href="http://i.imgur.com/szqhrG3.png"><strong>Example</strong></a><strong><br />
      Usage: </strong>[divider style=&quot;solid&quot;  color=&quot;#eeeeee&quot; width=&quot;1px&quot;]<br />
    <strong>parameters:</strong> <br />
    <strong>style</strong>= solid, dashed, dotted,  double, groove, ridge, inset, outset, none<br />
    <strong>color</strong>= any hex color values.<br />
    <strong>Width</strong> = any number of width in pixel.  e.g: 5px<br />
    <br />
    <strong> </strong></li>
  <li><strong>Table Shortcode<br />
    </strong>Use this shortcode  to display a table. <a target="_blank" href="http://i.imgur.com/HX12jvK.png"><strong>Example</strong></a><strong><br />
      Usage: </strong>[table cols=&quot;names,age,occupation&quot;  data=&quot;Jhon,25,Blogger,Sara,20,Model&quot;]<br />
    <br />
    <strong> </strong></li>
  <li><strong>2 columns text Shortcode<br />
    </strong>Use this shortcode  to display text in 2 columns. <a target="_blank" href="http://i.imgur.com/4sCL1Gx.png"><strong>Example</strong></a><strong><br />
      Usage:<br />
      </strong> [col2] your text that you want to display in 1st  column [/col2]<br />
    [col2] your text that you want to display in 2nd column [/col2]<br />
    <br />
    <strong></strong></li>
  <li><strong>3 columns text Shortcode<br />
    </strong>Use this shortcode  to display text in 3 columns. <a target="_blank" href="http://i.imgur.com/YQ69SEx.png"><strong>Example</strong></a><strong><br />
      Usage:<br />
      </strong> [col3] your text that you want to display in 1st  column [/col3]<br />
    [col3] your text that you want to display in 2nd column [/col3]<br />
    [col3] your text that you want to display in 3rd column [/col3]<br />
    <strong></strong></li>
  <li><strong>4 columns text Shortcode<br />
    </strong>Use this shortcode  to display text in 4 columns. <a target="_blank" href="http://i.imgur.com/x6IPOdq.png"><strong>Example</strong></a><strong><br />
      Usage:<br />
      </strong> [col4]your text that you want to display in 1st  column[/col4]<br />
    [col4]your text that you want to display in 2nd column[/col4]<br />
    [col4]your text that you want to display in 3rd column[/col4]<br />
    [col4]your text that you want to display in 4th column[/col4]<br />
    <strong></strong></li>
  <li><strong>Facebook Like button Shortcode<br />
    </strong>Display a facebook  like button anywhere you want. <a target="_blank" href="http://i.imgur.com/kp9DD0A.png"><strong>Example</strong></a><br />
    <strong>Usage</strong>: [fblike]<br />
    <strong></strong></li>
  <li><strong>Tweet button Shortcode<br />
    </strong>Display a Twitter  Tweet button anywhere in the post.<strong> </strong><a target="_blank" href="http://i.imgur.com/OsmTJWO.png"><strong>Example</strong></a><br />
    <strong>usage:</strong> [tweet]<br />
    <strong></strong></li>
  <li><strong>Pinterest button Shortcode<br />
    </strong>Display a Pinterest  Pin it button anywhere in the post. <a target="_blank" href="http://i.imgur.com/HDPdrEf.png"><strong>Example</strong></a><strong><br />
      Usage</strong>: [pinit]<br />
    <strong><br />
    </strong></li>
  <li><strong>Google + button Shortcode<br />
    </strong>Display a Google  plus shortcode button anywhere in your post. <a target="_blank" href="http://i.imgur.com/cgMgOyH.png"><strong>Example</strong></a><strong><br />
      Usage: </strong>[gplus]<br />
    <strong><br />
    </strong></li>
  <li><strong>Slider Shortcode<br />
    </strong>Display a slider  anywhere in your post. <a target="_blank" href="http://i.imgur.com/3k5i4MZ.jpg"><strong>Example</strong></a><strong><br />
      Usage: </strong>to add a  slider in your post, follow these steps: <br />
    a. Click the &ldquo;Slider Shortcode&rdquo; button. This will be added to the post editor:<br />
    [slider effect=&quot;random&quot; pausetime=&quot;3000&quot;  autoplay=&quot;true&quot; navigation=&quot;true&quot;][/slider]<strong><br />
      <br />
      b. </strong>Put your cursor right before this [/slider]<strong><br />
        a. </strong>Click the &ldquo;Add Media&rdquo; button and upload your images. Then hold the ctrl  button from your keyboard and select the images that you want to display in  your slider. Now click &ldquo;Insert into Post&rdquo; button.<br />
    b. That&rsquo;s all! You have successfully added a Slider in your post.  You can change the parameters of your slider if  you want to customizr the slider. <br />
    <strong>parameters:<br />
      effect= </strong>random,<strong> </strong>sliceDown, sliceDownLeft, sliceUp,  sliceUpLeft, sliceUpDown,  sliceUpDownLeft, fold,  fade, slideInRight,  slideInLeft, boxRandom,  boxRain, boxRainReverse,  boxRainGrow, boxRainGrowReverse<br />
    <strong>Pausetime= in milliseconds. </strong>Eg: 3000<strong><br />
      autoplay= </strong>true/false<strong><br />
        navigation= </strong>true/false<br />
    <strong></strong></li>
  <li><strong>List type 1 Shortcode<br />
    </strong>Instead of typical  circle list style you can display your lists with beautiful style. <a target="_blank" href="http://i.imgur.com/sKVCqgu.png"><strong>Example</strong></a><strong><br />
      Usage: </strong>[list1]&lt;li&gt;item1&lt;/li&gt;&lt;li&gt;item2&lt;/li&gt;&lt;li&gt;item3&lt;/li&gt;[/list1]<br />
    <strong> </strong></li>
  <li><strong>List type 2 Shortcode<br />
    </strong>Instead of typical  circle list style you can display your lists with beautiful style. <a target="_blank" href="http://i.imgur.com/Aq1oHOL.png"><strong>Example</strong></a><strong><br />
      Usage: </strong>[list2]&lt;li&gt;item1&lt;/li&gt;&lt;li&gt;item2&lt;/li&gt;&lt;li&gt;item3&lt;/li&gt;[/list2]<br />
    <strong> </strong></li>
  <li><strong>List type 3 Shortcode<br />
    </strong>Instead of typical  circle list style you can display your lists with beautiful style. <a target="_blank" href="http://i.imgur.com/J1t9Ypg.png"><strong>Example</strong></a><strong><br />
      Usage: </strong>[list3]&lt;li&gt;item1&lt;/li&gt;&lt;li&gt;item2&lt;/li&gt;&lt;li&gt;item3&lt;/li&gt;[/list3]<br />
    <strong> </strong></li>
  <li><strong>List type 4 Shortcode<br />
    </strong>Instead of typical  circle list style you can display your lists with beautiful style. <a target="_blank" href="http://i.imgur.com/hahEuqE.png"><strong>Example</strong></a><strong><br />
      Usage: </strong>[list4]&lt;li&gt;item1&lt;/li&gt;&lt;li&gt;item2&lt;/li&gt;&lt;li&gt;item3&lt;/li&gt;[/list4]<br />
    <strong> </strong></li>
  <li><strong>List type 5 Shortcode<br />
    </strong>Instead of typical  circle list style you can display your lists with beautiful style. <a target="_blank" href="http://i.imgur.com/AbZlBOe.png"><strong>Example</strong></a><strong><br />
      Usage: </strong>[list5]&lt;li&gt;item1&lt;/li&gt;&lt;li&gt;item2&lt;/li&gt;&lt;li&gt;item3&lt;/li&gt;[/list5]<br />
    <strong> </strong></li>
  <li><strong>Responsive Youtube video Shortcode<br />
    </strong>With this shortcode  you can display youtube videos that are responsive to the screen size. <strong><br />
      Usage: <br />
      </strong>[youtube width=&quot;100%&quot; height=&quot;100%&quot;  autoplay=&quot;false&quot;]your youtube video link[/youtube]<br />
    <strong> </strong></li>
  <li><strong>Responsive Vimeo video Shortcode<br />
    </strong>With this shortcode  you can display Vimeo videos that are responsive to the screen size. <strong><br />
      Usage:  </strong>[vimeo  width=&quot;600&quot; height=&quot;365&quot; autoplay=&quot;false&quot;]your vimeo  video link[/vimeo]<br />
    <br /></li>
  <li><strong>Tabs Shortcode<br />
    </strong>With this shortcode  you can display your content in beautiful tabs. <a target="_blank" href="http://i.imgur.com/FVhoht2.png"><strong>Example</strong></a><strong><br />
      Usage: <br />
      </strong>[tabs titles=&quot;Tab One, Tab Two&quot;]<br />
    [tab]Tab one content[/tab]<br />
    [tab]tab two content[/tab] <br />
    [/tabs]<br />
    <strong>Note:</strong> To use html inside you tabs, switch to &ldquo;Text&rdquo;  mode of the editor.<br />
    <strong> </strong></li>
  <li><strong>Toggle Shortcode<br />
    </strong>With this shortcode  you can display your content with show/Hide button.<a target="_blank" href="http://i.imgur.com/ghVOLbL.png"><strong>Example</strong></a><strong><br />
      Usage: </strong>[toggle title=&quot;Spoiler alert&quot;]Your  content which is by default hidden.[/toggle]<br />
    <strong>parameter:</strong><br />
<strong>title</strong>= &ldquo;your show/hide buttons text.&rdquo;<br />
    <strong> </strong></li>
  <li><strong>Link Button Shortcode<br />
    </strong>You can display  colorful buttons with this shortcode. <a target="_blank" href="http://i.imgur.com/h29Gjnu.png"><strong>Example</strong></a><strong><br />
      Usage: <br />
      </strong>[button background_color=&quot;#eb5c49&quot;  text_color=&quot;#ffffff&quot; url=&quot;http://www.google.com&quot; ][/button]<br />
    <br />
    <strong>parameters: <br />
      </strong><strong>background_color = </strong>any hex color value<br />
    <strong>text_color = </strong>any hex color value<br />
    <strong>url = </strong>link of the button<br />
    <strong> </strong></li>
  <li><strong>Call to Action Shortcode<br />
    </strong>If you want to get  your visitor&rsquo;s attention and urge your site&rsquo;s viewers of a sales promotion  message to take an immediate action you should use this Element. <a target="_blank" href="http://i.imgur.com/TYi17Q4.png"><strong>Example</strong></a><br />
    
      <strong>Usage: </strong>[callaction  url=&quot;http://www.google.com&quot; background_color=&quot;#2dcb73&quot;  text_color=&quot;#ffffff&quot; button_text=&quot;A Simple Button&quot;  button_background_color=&quot;#e64429&quot; button_text_color=&quot;#ffffff&quot;]Your  Call to Action Text Message[/callaction]<br />
    <br />
    <strong>parameters:</strong> <br />
      <strong>url= </strong>url of the button<br />
        <strong>background_color = </strong>any hex color value.<br />
        <strong>text_color= </strong>any hex color value<br />
        <strong>button text = </strong>Text that you want to display inside the button<br />
         <strong>button_background_color</strong> = any hex color value.<br />
         <strong>button_text_color</strong> = any hex color value.<br />
                  <br />
                </li>
  <li><strong>Iframe Shortcode</strong><br />
    With this shortcode,  you can display any websites you want in your post using iframe.<a target="_blank" href="http://i.imgur.com/DC2F1T9.jpg"><strong>Example</strong></a><br />
      <strong>Usage: </strong>[iframe url=&quot;http://www.beemp3.com&quot;  width=&quot;100%&quot; height=&quot;500&quot; frameborder=&quot;0&quot;]<br />
    <strong>parameters: </strong><br />
      <strong>url</strong>= the webpage that you want to show inside you iframe.<br />
      <strong>width</strong> = width in percent. <br />
      <strong>height</strong> = height in number<br />
      <strong>frameborder</strong> = any numeric number.<br />
      <br /></li>
  <li><strong>Countdown Content Shortcode</strong><strong><br />
    </strong>Countdown shortcode  will hide your selected text and show it automatically on a certain date.<strong> <br />
      Usage: </strong>[countdown date=&quot;21&quot;  month=&quot;9&quot; year=&quot;2015&quot;]Your content that will be hidden and  will be shown after the countdown ends.[/countdown]<br />
    <br />
    <strong> </strong></li>
  <li><strong>Featured Image<br />
    </strong>Displays the  featured image of the post, if set any.<strong> <br />
      Usage: </strong>[featimage align=&quot;left&quot;]<br />
    <strong>parameters: <br />
      align:</strong> left, right, center<strong> </strong></li>
</ol>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>


<!--13. Theme Support-->
<div id="docu_supp">
<a class="docuback"><i class="icon-arrow-left"></i> Back</a>
<p><h3>12. Theme Support</h3></p>
<p>Theme support of the free version is provided here:<br />
<a target="_blank" href="http://www.towfiqi.com/forums/forum/asteria-lite">http://www.towfiqi.com/forums/forum/asteria-lite</a>
<br />
<br />

Theme Support for the premium version is provided here:<br />
<a target="_blank" href="http://www.towfiqi.com/forums/forum/asteria-pro">http://www.towfiqi.com/forums/forum/asteria-pro</a>
</p>
<div>


</div>
</div>
</div>